<template>
	<view class="emergency-contact-container">
		<view class="content">
			<uni-forms :model="formData" ref="form">
				<view class="title">
					用户资料设置
				</view>
				<uni-forms-item label="姓名" name="name" required>
					<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="年龄" name="age" required>
					<uni-easyinput type="text" v-model="formData.age" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="email" required>
					<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item label="电话" name="phone" required>
					<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<view class="title">
					紧急联系人设置
				</view>
				<uni-forms-item label="姓名" name="emergencyContactName" required>
					<uni-easyinput type="text" v-model="formData.emergencyContactName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="电话" name="emergencyContactPhone" required>
					<uni-easyinput type="text" v-model="formData.emergencyContactPhone" placeholder="请输入联系电话" />
				</uni-forms-item>
			</uni-forms>
			<button class="btn" @click="submitForm">保存</button>
		</view>
	</view>
</template>

<script>
	import {updateUserInfo} from "../../ajax/api/self.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				formData: {
					name: "", //姓名
					age: "", //年龄
					email: "", //邮箱
					phone: "", //电话
					emergencyContactName: "", //紧急联系人姓名
					emergencyContactPhone: "", //紧急联系人电话
				},
				rule: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请填写您的姓名',
						}, {
							minLength: 2,
							maxLength: 8,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '请填写您的年龄',
						},{
							format:"number",
							errorMessage: '年龄必须为数字',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (value > 100 || value < 0) {
									callback("请填写正常的年龄")
								}
							}
						}],
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请填写您的邮箱',
						},{
							format:"email",
							errorMessage: '请填写正确的邮箱号',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请填写您的电话号码',
						}, {
							validateFunction: (rule, value, data, callback) => {
								const reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
								if (!reg.test(value)) {
									callback("请输入正确的手机号")
								} else {
									callback();
								}
							}
						}]
					},
					emergencyContactName:{
						rules: [{
							required: true,
							errorMessage: '请填写紧急联系人的姓名',
						}, {
							minLength: 2,
							maxLength: 8,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					emergencyContactPhone:{
						rules: [{
							required: true,
							errorMessage: '请填写紧急联系人的电话号码',
						}, {
							validateFunction: (rule, value, data, callback) => {
								const reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/;
								if (!reg.test(value)) {
									callback("请输入正确的手机号")
								} else {
									callback();
								}
							}
						}]
					}
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rule);
		},
		onLoad() {
			this.formData = this.userInfo;
			if(this.formData.role === 1){
				// #ifdef MP-WEIXIN
				if (wx.hideHomeButton) {
					wx.hideHomeButton();
				}
				// #endif
			}
		},
		computed:mapState(["userInfo"]),
		methods: {
			async submitForm() {
				console.log(this.formData);
				this.$refs.form.validate().then(async res => {
					const result = await updateUserInfo(this.userInfo._id,{...this.formData});
					uni.showToast({
						title:"设置成功"
					})
					// 清空userInfo和token
					this.$store.commit("updateUserInfo",null);
					this.$store.commit("setToken",null);
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/login/login"
						})
					},500)
					
				}).catch(e => {
					console.log(e)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.emergency-contact-container {
		.content {
			height: 600rpx;
			margin: 40rpx;

			.title {
				width: 100%;
				border-bottom: 1px solid #ccc;
				box-sizing: border-box;
				color: #4c4c4c;
				padding: 10rpx;
				padding-left: 0;
				margin-bottom: 10rpx;
				font-weight: bold;
			}

			.btn {
				background: #4f98dc;
				color: #fff;
				margin-top: 80rpx;
			}

		}
	}
</style>
